<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <!--<div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="5">
            <a-form-model-item label="材料类型种类" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select
                show-search
                :allowClear="true"
                placeholder="请选择材料类型种类"
                style="width: 100%"
                v-model="queryParam.type"
                @change="changeMaterial">
                <a-select-option :value="item.id" v-for="(item,index) in materialTypeData" :key="index">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="材料类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-tree-select
                :label-in-value="true"
                :allowClear="true"
                style="width: 100%"
                :value="queryParam.value"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择"
                :replaceFields="dataFields"
                @change="changeMaterialType"
                :treeDefaultExpandAll="false"
              >
              </a-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="depositoryName">
              <a-select
                show-search
                :allowClear="true"
                placeholder="请选择仓库"
                option-filter-prop="children"
                v-model="queryParam.depositoryId"
                style="width: 100%"
                :filter-option="filterOptionDepository"
                @change="changeDepository">
                <a-select-option :value="item.id" v-for="(item,index) in depositoryData" :key="index">
                  {{item.depositoryName}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="5">
            <a-form-model-item label="材料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-input placeholder="请输入材料名称" v-model="queryParam.materialName" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-input placeholder="请输入材料型号" v-model="queryParam.modelNumber" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-input placeholder="请输入材料规格" v-model="queryParam.specifications" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="品牌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-input placeholder="请输入材料品牌" v-model="queryParam.brand" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>-->
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="100"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
          >
            <div>
              <div class="name">材料名称：{{ item.material.materialName || '无' }}</div>
              <div class="contact">
                <span>型号：{{ item.material.modelNumber || '无' }}</span>
              </div>
              <div class="contact">
                <span>规格：{{ item.material.specifications || '无' }}</span>
              </div>
              <div class="contact">
                <span>品牌：{{ item.material.brand || '无' }}</span>
              </div>
              <div class="contact">
                <span>市场价：{{ item.material.marketPrice || '无' }}</span>
                <span style="margin-left: 20px;margin-right: 20px">预算价：{{ item.material.estimatedCost || '无' }}</span>
                <span>成本价：{{ item.material.costPrice || '无' }}</span>
              </div>
              <!--<div class="contact">
                <span>入库单状态：
                  <a-tag v-if="item.orderStatus === 1">草稿</a-tag>
                  <a-tag color="orange" v-if="item.orderStatus === 2">审批中</a-tag>
                  <a-tag color="green" v-if="item.orderStatus === 3">审批通过</a-tag>
                  <a-tag color="red" v-if="item.orderStatus === 4">未通过</a-tag>
                  <a-tag color="magenta" v-if="item.orderStatus === 5">已撤销</a-tag>
                </span>
                <span style="margin-left: 20px">审批人：{{ item.approvedBy || "无" }}</span>
              </div>-->
              <div class="contact">
                <span>仓库：{{ item.depositoryName || '无' }}</span>
              </div>
              <div class="contact">
                <span>库存：
                  <!--<span v-if="item.stock <= item.inventoryWarningNum" style="color: red">{{ item.stock || 0 }}</span>-->
                  <span>{{ item.stock || 0 }}</span>
                </span>
              </div>
            </div>
          </div>
        </van-list>
      </div>

      <!--<a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

      </a-table>-->
    </div>

  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction,putAction} from "@/api/manage";

  export default {
    name: 'stockList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {},
    data() {
      return {
        description: '仓库材料明细表管理页面',
        dataSource: [],
        treeData: [],
        materialDate: 0,
        queryParam:{},
        materialTypeData: [
          {
            id: 1,
            name: '主要材料'
          },
          {
            id: 2,
            name: '辅要材料'
          },
          {
            id: 3,
            name: '赠品材料'
          }
        ],
        dataFields: {
          title: 'materialTypeName',
          key: 'id',
          value: 'id',
          children: "children"
        },
        // 表头
        columns: [
          {
            title: '名称',
            align: "center",
            dataIndex: 'material.materialName',
            // customRender: (value, row, index) => {
            //   let obj = {
            //     children: value,
            //     attrs: {}
            //   }
            //
            //   if (row.rowSpan != null){
            //     obj = {
            //       children: value,
            //       attrs: {rowSpan: row.rowSpan}
            //     }
            //   }
            //
            //   /*if (index === 0) {
            //     obj = {
            //       children:value,
            //       attrs: { rowSpan: 2 }
            //     }
            //   }
            //   if (index === 2) {
            //     obj = {
            //       children:value,
            //       attrs: { rowSpan: 4 }
            //     }
            //   }
            //   if (index === 6) {
            //     obj = {
            //       children:value,
            //       attrs: { rowSpan: 4 }
            //     }
            //   }*/
            //   if (row.rowSpan == null){
            //     obj.attrs.colSpan = 0
            //   }
            //   /*if ([1, 3,4,5, 7,8,9].indexOf(index) !== -1) {
            //     obj.attrs.colSpan = 0
            //   }*/
            //   return obj
            // }
          },
          {
            title: '型号',
            align: "center",
            dataIndex: 'material.modelNumber',
            // customRender: (value, row, index) => {
            //   let obj = {
            //     children: value,
            //     attrs: {}
            //   }
            //   if (row.rowSpan != null){
            //     obj = {
            //       children: value,
            //       attrs: {rowSpan: row.rowSpan}
            //     }
            //   }
            //   if (row.rowSpan == null){
            //     obj.attrs.colSpan = 0
            //   }
            //   return obj
            // }
          },
          {
            title: '规格',
            align: "center",
            dataIndex: 'material.specifications',
            // customRender: (value, row, index) => {
            //   let obj = {
            //     children: value,
            //     attrs: {}
            //   }
            //   if (row.rowSpan != null){
            //     obj = {
            //       children: value,
            //       attrs: {rowSpan: row.rowSpan}
            //     }
            //   }
            //   if (row.rowSpan == null){
            //     obj.attrs.colSpan = 0
            //   }
            //   return obj
            // }
          },
          {
            title: '品牌',
            align: "center",
            dataIndex: 'material.brand',
            // customRender: (value, row, index) => {
            //   let obj = {
            //     children: value,
            //     attrs: {}
            //   }
            //   if (row.rowSpan != null){
            //     obj = {
            //       children: value,
            //       attrs: {rowSpan: row.rowSpan}
            //     }
            //   }
            //   if (row.rowSpan == null){
            //     obj.attrs.colSpan = 0
            //   }
            //   return obj
            // }
          },
          {
            title: '市场价',
            align: "center",
            dataIndex: 'material.marketPrice',
            // customRender: (value, row, index) => {
            //   let obj = {
            //     children: value,
            //     attrs: {}
            //   }
            //   if (row.rowSpan != null){
            //     obj = {
            //       children: value,
            //       attrs: {rowSpan: row.rowSpan}
            //     }
            //   }
            //   if (row.rowSpan == null){
            //     obj.attrs.colSpan = 0
            //   }
            //   return obj
            // }
          },
          {
            title: '预算价',
            align: "center",
            dataIndex: 'material.estimatedCost',
            // customRender: (value, row, index) => {
            //   let obj = {
            //     children: value,
            //     attrs: {}
            //   }
            //   if (row.rowSpan != null){
            //     obj = {
            //       children: value,
            //       attrs: {rowSpan: row.rowSpan}
            //     }
            //   }
            //   if (row.rowSpan == null){
            //     obj.attrs.colSpan = 0
            //   }
            //   return obj
            // }
          },
          {
            title: '成本价',
            dataIndex: 'material.costPrice',
            width: '5%',
            align: "center",
          },
          {
            title: '仓库',
            align: "center",
            dataIndex: 'depositoryName',
          },
          {
            title: '库存',
            align: "center",
            dataIndex: 'stock',
            defaultSortOrder: 'ascend',
            sorter: (a, b) => a.stock - b.stock,
            customCell: (record) => {
              if(record.stock <= record.inventoryWarningNum) {
                return {
                  style: {
                    color: 'red'
                  }
                }
              }
            }
          },
          /*{
            title: '库存汇总',
            align: "center",
            dataIndex: 'totalStock',
            customRender: (value, row, index) => {
              let obj = {
                children: value,
                attrs: {}
              }
              if (row.rowSpan != null){
                obj = {
                  children: value,
                  attrs: {rowSpan: row.rowSpan}
                }
              }
              if (row.rowSpan == null){
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },*/
        ],
        url: {
          list: "/ghSupplychainDepositoryItem/list",
          queryDepositoryList: "/ghSupplychainDepository/allList",
          treeDataList: "/ghSupplychainMaterialType/list",
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        depositoryData: [], //仓库列表
        dictOptions: {},
        superFieldList: [],
        finished: false,
      }
    },
    created() {
      let that = this;
      window.dataSource = that.dataSource;
      this.loadDepositoryData();
      this.initTreeData(this.type);
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      //加载仓库
      loadDepositoryData(){
        getAction(this.url.queryDepositoryList).then((res) => {
          if (res.success) {
            this.depositoryData = res.result.records||res.result;
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      filterOptionDepository(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeDepository(value){
        this.loadData(1);
      },
      changeMaterial(value) {
        this.initTreeData(value)
        this.queryParam.materialType = value;
        this.loadData(1);
      },
      changeMaterialType(val){
        this.queryParam.value = val;
        this.queryParam.materialTypeId = val.value;
        this.loadData(1);
      },
      initTreeData(materialType) {
        getAction(this.url.treeDataList, {
          materialType : materialType
        })
          .then((res) => {
            if (res.success) {
              this.treeData = res.result;
            } else {
              this.$message.warning(res.message)
            }
        })
      },
      searchReset() {
        this.queryParam = {}
        this.type = {};
        this.loadData(1);
      },
      onLoadList(e){
        this.ipagination.current++
        this.loadData(this.ipagination.current)
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
          this.finished = false;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = [...this.dataSource, ...res.result.records]
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
          if(res.result.records.length<10){
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .remarkTxt{
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .list{
    overflow-y: scroll;
    height:calc(100vh - 100px);
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>